<template>
  <div>
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" block class="demo-table-expand">
              <el-form-item label="提干">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="选项 A" style="margin-left:30px;">
                <span>{{ props.row.a }}</span>
              </el-form-item>
              <el-form-item label="选项 B" style="margin-left:30px;">
                <span>{{ props.row.b }}</span>
              </el-form-item>
              <el-form-item label="选项 C" style="margin-left:30px;">
                <span>{{ props.row.c }}</span>
              </el-form-item>
              <el-form-item label="选项 D" style="margin-left:30px;">
                <span>{{ props.row.d }}</span>
              </el-form-item>
              <el-form-item label="正确答案 ：" style="margin-left:30px;">
                <span>{{ props.row.key }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="编号" prop="id" width="200"/>
        <el-table-column label="提干" prop="name" />
      </el-table>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [{
        id: '1',
        name: '这是提干',
        a: '212',
        b: '456',
        c: '465',
        d: '321',
        key: 'D'
      }, {
        id: '2',
        name: '这是提干2',
        a: '6511',
        b: '5245',
        c: '2221',
        d: '3211',
        key: 'C'
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
